/*
  学习目标：
  需求1：✅准备数据、渲染评论列表
  需求2：✅根据id，删除一条数据
  需求3：实现发布评论 - 受控组件改造
  需求4：实现发布评论
  需求5：实现清除评论功能
*/

// 导入react和react-dom
import React from 'react';
import ReactDom from 'react-dom/client';
import './index.css';

class Handler extends React.Component {
  state = {
    list: [
      {
        id: 1,
        username: '王思聪',
        content:
          '想你的夜想你的夜想你的夜想你的夜想你的夜想你的夜想你的夜想你的夜',
      },
      {
        id: 2,
        username: '马云',
        content:
          '我对钱不感兴趣我对钱不感兴趣我对钱不感兴趣我对钱不感兴趣我对钱不感兴趣我对钱不感兴趣',
      },
      {
        id: 3,
        username: '王健林',
        content:
          '实现一个小目标实现一个小目标实现一个小目标实现一个小目标实现一个小目标实现一个小目标实现一个小目标',
      },
    ],
  };
  // 定义一个删除方法，接受ID
  handleClickDel = (id) => {
    console.log('id----->', id);
    // 方法里面把数据过滤掉，注意这里不要改变到原数组
    this.setState(
      {
        list: this.state.list.filter((item) => item.id !== id),
      },
      () => {
        // 在回调函数中打印查看更新后的状态
        console.log('this.state.list----->', this.state.list);
      }
    );
  };
  render() {
    return (
      <div className="app">
        {/* 表单提交的时候，运行发布评论的函数 */}
        <form onSubmit={this.handlePublish}>
          <input className="user" type="text" placeholder="请输入评论人" />
          <br />
          <textarea
            className="content"
            cols="30"
            rows="10"
            placeholder="请输入评论内容"
          />
          <br />
          <button>发表评论</button>
          <button type="button">清空评论</button>
        </form>
        <ul>
          {this.state.list.map((item) => {
            return (
              <li key={item.id}>
                <h3>评论人: {item.username}</h3>
                <p>评论内容：{item.content}</p>
                {/* 绑定事件，并且传递ID */}
                <button
                  onClick={() => {
                    this.handleClickDel(item.id);
                  }}
                >
                  删除
                </button>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}

// 18版本以上新出的挂载方法
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(<Handler></Handler>);
